<template>
  <div id="container">
    <div class="ivu-card p-3">
      <div class="search_title d-flex align-items-center">开发者服务</div>
      <div class="serach_case"></div>
    </div>

    <div class="ivu-card flex-grow-1 p-4 m-3">
      <div
        class="tools d-flex align-items-center"
        style="
          width: 40%;
          display: flex;
          padding: 0px 2.5rem;
          margin-bottom: 2.5rem;
        "
      >
        <Button class="addBtn" type="primary" @click="addAction"
          >+&nbsp;&nbsp;添加开发者</Button
        >
      </div>

      <div style="padding: 0px 2.5rem">
        <Table :columns="columns" :data="list">
          <template slot-scope="{ row, index }" slot="action">
            <span class="btn" @click="edit(index)">编辑</span>
            <span class="btn" @click="deleteInfo(index)">删除</span>
          </template>
        </Table>
      </div>
    </div>

    <Drawer
      title="开发者信息"
      v-model="showInfo"
      width="520"
      :mask-closable="false"
      :styles="styles"
    >
      <Form :model="formData" label-position="top">
        <FormItem label="公司名称:" required>
          <Input v-model="formData.title" />
        </FormItem>
        <FormItem label="公司地址:">
          <Input v-model="formData.address" />
        </FormItem>

        <FormItem label="负责人名称:" required>
          <Input v-model="formData.name" />
        </FormItem>
        <FormItem label="负责人电话:">
          <Input v-model="formData.phone" />
        </FormItem>
        <FormItem label="推送数据信息">
          <i-switch v-model="formData.ispush" />
        </FormItem>
        <FormItem label="推送图片数据">
          <i-switch v-model="formData.pushimge" />
        </FormItem>
        <FormItem label="回调地址">
          <Input v-model="formData.pushurl" />
        </FormItem>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="showInfo = false"
          >取消</Button
        >
        <Button type="primary" @click="saveInfo">提交</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import index from "./index.js";
export default index;
</script>
<style scoped lang="less">
#container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: transparent !important;
  .search_title {
    font-size: 20px;
    font-weight: 400;
    color: #515a6e;
    text-align: left;
    margin-bottom: 10px;
    // .largeIcon {
    //   color: #ffb6b9;
    //   background-color: #fae3d9;
    // }
  }
  .serach_case {
    .ivu-form-item {
      margin-bottom: 10px;
    }
  }
  .tools {
    margin-bottom: 25px;
    .ivu-btn {
      margin: 0 10px 0 0;
    }
  }
  .btn {
    color: #57a3f3;
    cursor: pointer;
    padding-right: 15px;
  }

  .btn:hover {
    text-decoration: underline;
  }
}
</style>
